# Gradio as an MCP Client

In the previous section, we explored how to create an MCP Server using Gradio and connect to it using an MCP Client. In this section, we're going to explore how to use Gradio as an MCP Client to connect to an MCP Server.

<Tip>

Gradio is best suited to the creation of UI clients and MCP servers, but it is also possible to use it as an MCP Client and expose that as a UI.

</Tip>

We'll connect to the MCP server we created in the previous section and use it to answer questions.

## MCP Client in Gradio

First, we need to install the `smolagents`, gradio and mcp-client libraries, if we haven't already:

```bash
pip install smolagents[mcp] gradio[mcp] mcp
```

Now, we can import the necessary libraries and create a simple Gradio interface that uses the MCP Client to connect to the MCP Server.


```python
import gradio as gr

from mcp.client.stdio import StdioServerParameters
from smolagents import ToolCollection, CodeAgent
from smolagents import CodeAgent, InferenceClientModel
from smolagents.mcp_client import MCPClient
```

Next, we'll connect to the MCP Server and get the tools that we can use to answer questions.

```python
mcp_client = MCPClient(
    {"url": "http://localhost:7860/gradio_api/mcp/sse"}
)
tools = mcp_client.get_tools()
```

Now that we have the tools, we can create a simple agent that uses them to answer questions. We'll just use a simple `InferenceClientModel` and the default model from `smolagents` for now.

```python
model = InferenceClientModel()
agent = CodeAgent(tools=[*tools], model=model)
```

Now, we can create a simple Gradio interface that uses the agent to answer questions.

```python
demo = gr.ChatInterface(
    fn=lambda message, history: str(agent.run(message)),
    type="messages",
    examples=["Prime factorization of 68"],
    title="Agent with MCP Tools",
    description="This is a simple agent that uses MCP tools to answer questions.",
    messages=[],
)

demo.launch()
```

And that's it! We've created a simple Gradio interface that uses the MCP Client to connect to the MCP Server and answer questions.

<iframe
	src="https://mcp-course-unit2-gradio-client.hf.space"
	frameborder="0"
	width="850"
	height="450"
></iframe>


## Complete Example

Here's the complete example of the MCP Client in Gradio:

```python
import gradio as gr

from mcp.client.stdio import StdioServerParameters
from smolagents import ToolCollection, CodeAgent
from smolagents import CodeAgent, InferenceClientModel
from smolagents.mcp_client import MCPClient


try:
    mcp_client = MCPClient(
        # {"url": "https://abidlabs-mcp-tools.hf.space/gradio_api/mcp/sse"}
        {"url": "http://localhost:7860/gradio_api/mcp/sse"}
    )
    tools = mcp_client.get_tools()

    model = InferenceClientModel()
    agent = CodeAgent(tools=[*tools], model=model)

    def call_agent(message, history):
        return str(agent.run(message))


    demo = gr.ChatInterface(
        fn=lambda message, history: str(agent.run(message)),
        type="messages",
        examples=["Prime factorization of 68"],
        title="Agent with MCP Tools",
        description="This is a simple agent that uses MCP tools to answer questions.",
        messages=[],
    )

    demo.launch()
finally:
    mcp_client.close()
```

You'll notice that we're closing the MCP Client in the `finally` block. This is important because the MCP Client is a long-lived object that needs to be closed when the program exits.

## Deploying to Hugging Face Spaces

To make your server available to others, you can deploy it to Hugging Face Spaces, just like we did in the previous section.
To deploy your Gradio MCP client to Hugging Face Spaces:

1. Create a new Space on Hugging Face:
   - Go to huggingface.co/spaces
   - Click "Create new Space"
   - Choose "Gradio" as the SDK
   - Name your space (e.g., "mcp-client")

2. Create a `requirements.txt` file:
```txt
gradio[mcp]
smolagents[mcp]
```

3. Push your code to the Space:
```bash
git init
git add server.py requirements.txt
git commit -m "Initial commit"
git remote add origin https://huggingface.co/spaces/YOUR_USERNAME/mcp-client
git push -u origin main
```

## Conclusion

In this section, we've explored how to use Gradio as an MCP Client to connect to an MCP Server. We've also seen how to deploy the MCP Client in Hugging Face Spaces.


